<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>后台-添加博客</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
  <!--bootstrap的js-->
  <!--  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>-->
</head>

<body>

<div class="container-fluid p-1 bg-dark text-white text-center">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="/">首页</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/tags">标签</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/article">文章</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">关于</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/message">留言板</a>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#searchModal">
        <strong>搜索</strong>
      </a>
    </li>
  </ul>
</div>

<!--顶部背景图片-->
<div  alt="" class="cz-bg-section cz-bg-img"
      style="height: 45vh;background-image:url('../static/images/message.jpg')"
      th:style="'height: 45vh;background-image: url(' + @{/images/message.jpg} + ')'">

  <div class="m-bg-class_cover" align="center">
    <p class="cz-page-title"> 📪留言板 </p>
    <p class="cz-page-title2 fw-normal">有什么对我想说的话，来吧！</p>
  </div>

</div>

<!-- 搜索框 -->
<div class="modal fade" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content p-2 ">
      <div class="modal-body ">
        <button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="text-center fs-5 mb-3">搜　索</div>
        <div class="input-group mb-4">
                    <span class="input-group-text" id="basic-addon1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
                        </svg>
                    </span>
          <input id="keywordInput" type="text" class="form-control" placeholder="输入关键词" aria-describedby="basic-addon1">
        </div>

        <div class="mb-2">搜索结果</div>
        <!-- 搜索结果展示区域 -->
        <div id="searchResults" class="list-group">
        </div>
      </div>

    </div>
  </div>
</div>


<div class="container " style="margin-top: -4em;max-width: 1200px">
  <div class="col">
    <div class="card border-2 mb-3 shadow">
      <!--表单-->
      <div id="message-form"  class="card-body border-1">
        <div class="row align-items-center mb-3">
          <!--头像-->
          <div class="col-auto">
            <a class="avatar">
              <img id="avatar" class="img-thumbnail w-100 h-100" >
            </a>
          </div>
          <!--输入-->
          <div class="col">
            <div class="row">
              <input type="hidden" name="parentMessageId" >
              <input type="hidden" name="rootMessageId">
              <input type="hidden" name="avatar">

              <div class="col-md-4 mb-1">
                <input name="email" type="email" class="form-control" placeholder="邮箱" id="emailInput" oninput="checkQQEmail()" th:value="${session.user != null ? session.user.email : ''}">
              </div>
              <div class="col-md-4 mb-1">
                <input name="nickname" type="text" class="form-control" placeholder="昵称" th:value="${session.user != null ? session.user.nickname : ''}">
              </div>
              <div class="col-md-4 mb-1">
                <input name="address"  type="text" class="form-control" placeholder="站点">
              </div>
            </div>
          </div>


        </div>
        <!--留言内容-->
        <div class="row align-items-center mb-3">
          <div class="col">
            <textarea id="message-content" name="content" class="form-control" rows="3" placeholder="注意文明发言哦~"></textarea>
          </div>
        </div>
        <!--表情框-->
        <div class="cz-emoji-container mb-3">
          <div class="cz-emoji-content">
            <!-- Emoji 列表 -->
            <span onclick="addEmoji('😀')">😀</span><span onclick="addEmoji('😃')">😃</span><span onclick="addEmoji('😄')">😄</span><span onclick="addEmoji('😁')">😁</span><span onclick="addEmoji('😆')">😆</span><span onclick="addEmoji('😅')">😅</span><span onclick="addEmoji('🤣')">🤣</span><span onclick="addEmoji('😂')">😂</span><span onclick="addEmoji('🙂')">🙂</span><span onclick="addEmoji('🙃')">🙃</span><span onclick="addEmoji('😉')">😉</span><span onclick="addEmoji('😊')">😊</span><span onclick="addEmoji('😇')">😇</span><span onclick="addEmoji('🥰')">🥰</span><span onclick="addEmoji('😍')">😍</span><span onclick="addEmoji('🤩')">🤩</span><span onclick="addEmoji('😘')">😘</span><span onclick="addEmoji('😗')">😗</span><span onclick="addEmoji('😚')">😚</span><span onclick="addEmoji('😙')">😙</span><span onclick="addEmoji('😋')">😋</span><span onclick="addEmoji('😛')">😛</span><span onclick="addEmoji('😜')">😜</span><span onclick="addEmoji('🤪')">🤪</span><span onclick="addEmoji('😝')">😝</span><span onclick="addEmoji('🤑')">🤑</span><span onclick="addEmoji('🤗')">🤗</span><span onclick="addEmoji('🤭')">🤭</span><span onclick="addEmoji('🤫')">🤫</span><span onclick="addEmoji('🤔')">🤔</span><span onclick="addEmoji('🤐')">🤐</span><span onclick="addEmoji('🤨')">🤨</span><span onclick="addEmoji('😐')">😐</span><span onclick="addEmoji('😑')">😑</span><span onclick="addEmoji('😶')">😶</span><span onclick="addEmoji('😏')">😏</span><span onclick="addEmoji('😒')">😒</span><span onclick="addEmoji('🙄')">🙄</span><span onclick="addEmoji('😬')">😬</span><span onclick="addEmoji('🤥')">🤥</span><span onclick="addEmoji('😌')">😌</span><span onclick="addEmoji('😔')">😔</span><span onclick="addEmoji('😪')">😪</span><span onclick="addEmoji('🤤')">🤤</span><span onclick="addEmoji('😴')">😴</span><span onclick="addEmoji('😷')">😷</span><span onclick="addEmoji('🤒')">🤒</span><span onclick="addEmoji('🤕')">🤕</span><span onclick="addEmoji('🤢')">🤢</span><span onclick="addEmoji('🤮')">🤮</span><span onclick="addEmoji('🤧')">🤧</span><span onclick="addEmoji('🥵')">🥵</span><span onclick="addEmoji('🥶')">🥶</span><span onclick="addEmoji('🥴')">🥴</span><span onclick="addEmoji('😵')">😵</span><span onclick="addEmoji('🤯')">🤯</span><span onclick="addEmoji('🤠')">🤠</span><span onclick="addEmoji('🥳')">🥳</span><span onclick="addEmoji('😎')">😎</span><span onclick="addEmoji('🤓')">🤓</span><span onclick="addEmoji('🧐')">🧐</span><span onclick="addEmoji('😕')">😕</span><span onclick="addEmoji('😟')">😟</span><span onclick="addEmoji('🙁')">🙁</span><span onclick="addEmoji('☹️')">☹️</span><span onclick="addEmoji('😮')">😮</span><span onclick="addEmoji('😯')">😯</span><span onclick="addEmoji('😲')">😲</span><span onclick="addEmoji('😳')">😳</span><span onclick="addEmoji('🥺')">🥺</span><span onclick="addEmoji('😦')">😦</span><span onclick="addEmoji('😧')">😧</span><span onclick="addEmoji('😨')">😨</span><span onclick="addEmoji('😰')">😰</span><span onclick="addEmoji('😥')">😥</span><span onclick="addEmoji('😢')">😢</span><span onclick="addEmoji('😭')">😭</span><span onclick="addEmoji('😱')">😱</span><span onclick="addEmoji('😖')">😖</span><span onclick="addEmoji('😣')">😣</span><span onclick="addEmoji('😞')">😞</span><span onclick="addEmoji('😓')">😓</span><span onclick="addEmoji('😩')">😩</span><span onclick="addEmoji('😫')">😫</span><span onclick="addEmoji('🥱')">🥱</span><span onclick="addEmoji('😤')">😤</span><span onclick="addEmoji('😡')">😡</span><span onclick="addEmoji('😠')">😠</span><span onclick="addEmoji('🤬')">🤬</span>
          </div>
        </div>
        <!--发送-->
        <div class="row align-items-center">
          <div class="col">
            <button id="messagepost-btn" type="button" class="btn btn-secondary w-100">发送</button>
          </div>
        </div>

      </div>
    </div>

    <div class="card border-2 mb-3 shadow">
      <div class="card-body border-1">
        <!--评论列表-->
        <div class="cz-comment-section" id="message-container" th:fragment="messageList">
          <div class="cz-comment" th:each="message : ${page.list}">
            <div class="avatar" >
              <img class="img-thumbnail w-100 h-100" src="../static/images/me.jpg" th:src="@{${message.avatar}}">
              <a href="#" target="_blank" th:href="@{${message.address}}" th:if="${message.address != null}">
                <div class="img-thumbnail cz-avatar-overlay">
                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-link-45deg" viewBox="0 0 16 16">
                    <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
                    <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
                  </svg>
                </div>
              </a>
            </div>
            <div class="cz-comment-content" >
              <div class="cz-user-info">
                <span th:text="${message.nickname}">ChenZhen</span>
                <span class="badge text-bg-secondary" th:if="${message.adminMessage}">站主</span>
              </div>
              <div class="cz-comment-text" th:text="${message.content}" >快来说点什么吧</div>
              <div class="cz-comment-footer">
                <span th:text="${#temporals.format(message.createTime)}">2023-12-15 23:46</span>
                <!--<span>Like</span>-->
                <a href="#" class="me-1"
                   th:data-parentmessageid="${message.id}"
                   th:data-messagenickname="${message.nickname}"
                   th:data-rootmessageid="${message.id}"
                   onclick="reply(this)" >
                  回复
                </a>
                <a href="#"
                   th:if="${session.user}"
                   th:href="@{/message/delete/{id}(id=${message.id},pageNum=${page.pageNum})}"
                   onclick="return confirm('确定要删除该评论吗？三思啊! 删了可就没了！')">
                  删除
                </a>
              </div>
              <!--评论回复列表-->
              <div class="cz-reply-section" th:if="${#arrays.length(message.messageReplyList)} > 0">
                <div class="cz-comment" th:each="reply : ${message.messageReplyList}">

                  <div class="avatar" >
                    <img class="img-thumbnail w-100 h-100" src="../static/images/me.jpg" th:src="@{${reply.avatar}}">
                    <a href="#" target="_blank" th:href="@{${reply.address}}" th:if="${reply.address != null}">
                      <div class="img-thumbnail cz-avatar-overlay">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="white" class="bi bi-link-45deg" viewBox="0 0 16 16">
                          <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
                          <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
                        </svg>
                      </div>
                    </a>
                  </div>
                  <div class="cz-comment-content">
                    <div class="cz-user-info">
                      <span th:text="${reply.nickname}">ChenZhen</span>
                      <span class="badge text-bg-secondary" th:if="${reply.adminMessage}">站主</span>
                      <span th:if="${reply.parentMessageId != reply.rootMessageId}" th:text="'@' + ${reply.parentNickname}" class="ps-2 text-primary">@小白</span>
                    </div>
                    <div class="cz-comment-text" th:text="${reply.content}">快来说点什么吧</div>
                    <div class="cz-comment-footer">
                      <span th:text="${#temporals.format(reply.createTime)}">2023-12-15 23:46</span>
                      <!--                                <span>Like</span>-->
                      <a href="#" class="me-1"
                         th:data-parentmessageid="${reply.id}"
                         th:data-messagenickname="${reply.nickname}"
                         th:data-rootmessageid="${message.id}"
                         onclick="reply(this)" >
                        回复
                      </a>
                      <a href="#"
                         th:if="${session.user}"
                         th:href="@{/message/delete/{id}(id=${reply.id},pageNum=${page.pageNum})}"
                         onclick="return confirm('确定要删除该评论吗？三思啊! 删了可就没了！')">
                        删除
                      </a>
                    </div>
                  </div>
                </div>


              </div>


            </div>
          </div>


        </div>

        <!--分页-->
        <nav>
          <ul class="pagination justify-content-center">
            <li class="page-item" th:classappend="${page.hasPreviousPage} ? 'page-item' : 'page-item disabled' ">
              <a class="page-link text-black" href="#" th:href="@{ '/message?pageNum=' + ${page.prePage}}">上一页</a>
            </li>

            <li class="page-item"
                th:each="num : ${page.navigatepageNums}"
                th:classappend="${page.pageNum == num} ? 'page-item active' : 'page-item'">
              <a class="page-link text-black fw-bold" href="#" th:href="@{ '/message?pageNum=' + ${num}}" th:text="${num}">1</a>
            </li>

            <li class="page-item" th:classappend="${page.hasNextPage} ? 'page-item' : 'page-item disabled' ">
              <a class="page-link text-black" href="#" th:href="@{ '/message?pageNum=' + ${page.nextPage}}" >下一页</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>

<!--底部栏-->
<footer class="border-top p-3 bg-white text-muted small">
  <div class="container pb-5 ">
    <div class=" d-flex align-items-center justify-content-between">
      <div>
        <span class="cz-navbar-brand mr-2"><strong th:text="${author}">ChenZhen</strong></span>我的博客已营业：<span id="htmer_time">1年105天8时13分28秒</span>
      </div>
      <div>
        <a target="_blank" class="text-secondary fw-bold" href="#">粤ICP备2022122083号-1</a>
      </div>
    </div>
  </div>
</footer>



<script src="../static/lib/bootstrap.bundle.min.js" th:src="@{/lib/bootstrap.bundle.min.js}"></script>
<script src="../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
<script src="../static/lib/clickEffect.js" th:src="@{/lib/clickEffect.js}"></script>



<script th:inline="javascript">



  // // 移动设备导航栏样式切换
  // // 获取菜单切换按钮和移动设备菜单列表的引用
  // const menuToggleBtn = document.querySelector('.cz-menu-toggle-btn');
  // const mobileMenu = document.querySelector('.cz-mobile-menu');
  // // 点击菜单切换按钮时的事件处理函数
  // menuToggleBtn.addEventListener('click', () => {
  //   // 切换移动设备菜单列表的显示状态
  //   mobileMenu.classList.toggle('show');
  // });

  function addEmoji(emoji) {
    var contentTextarea = document.getElementById('message-content');
    contentTextarea.value = contentTextarea.value + emoji;
  }

  function checkQQEmail() {
    var emailInput = document.getElementById('emailInput');
    var avatar = document.getElementById('avatar');

    // 正则表达式匹配QQ邮箱
    var qqEmailRegex = /^[1-9]\d{4,10}@qq\.com$/;
    var userEmail = emailInput.value.trim();

    if (qqEmailRegex.test(userEmail)) {
      // 提取QQ号码
      var qqNumber = userEmail.split('@')[0];
      // 构建QQ头像URL
      var avatarURL = 'http://q1.qlogo.cn/g?b=qq&nk=' + qqNumber + '&s=100';
      // 更新头像
      avatar.src = avatarURL;
      $("[name='avatar']").val(avatarURL);
    } else {
      // 如果不是QQ邮箱，显示默认图片
      avatar.src = '/images/me.jpg';
      $("[name='avatar']").val('/images/me.jpg');

    }
  }


  // 运行时间统计
  function secondToDate(second) {
    if (!second) {
      return 0;
    }
    var time = new Array(0, 0, 0, 0, 0);
    if (second >= 365 * 24 * 3600) {
      time[0] = parseInt(second / (365 * 24 * 3600));
      second %= 365 * 24 * 3600;
    }
    if (second >= 24 * 3600) {
      time[1] = parseInt(second / (24 * 3600));
      second %= 24 * 3600;
    }
    if (second >= 3600) {
      time[2] = parseInt(second / 3600);
      second %= 3600;
    }
    if (second >= 60) {
      time[3] = parseInt(second / 60);
      second %= 60;
    }
    if (second > 0) {
      time[4] = second;
    }
    return time;
  }
  function setTime() {
    /*此处为网站的创建时间*/
    var create_time = Math.round(new Date(Date.UTC(2022, 8, 21, 15, 15, 15)).getTime() / 1000);
    var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
    currentTime = secondToDate((timestamp - create_time));
    currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
            + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
            + '秒';
    document.getElementById("htmer_time").innerHTML = currentTimeHtml;
  }
  setInterval(setTime, 1000);


  // 点击发送按钮时触发校验逻辑
  $('#messagepost-btn').click(function() {
    // 获取输入的值
    var email = $('input[name="email"]').val();
    var nickname = $('input[name="nickname"]').val();
    var content = $('textarea[name="content"]').val();

    // 校验邮箱
    if (!isValidEmail(email)) {
      alert('请输入有效的邮箱地址');
      return ;
    }
    // 校验昵称
    if (!nickname.trim()) {
      alert('昵称不能为空');
      return ;
    }

    // 校验留言内容
    if (!content.trim()) {
      alert('留言内容不能为空');
      return ;
    }
    postData();
  });


  // 简单的邮箱格式校验函数
  function isValidEmail(email) {
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }


  //发送请求给后端
  function postData() {
    // 从地址栏解析参数
    var urlParams = new URLSearchParams(window.location.search);
    var pageNumParam = urlParams.get('pageNum');
    var pageNum = pageNumParam ? parseInt(pageNumParam) : 1;
    $("#message-container").load(`/message?pageNum=${pageNum}`,{
      "parentMessageId" : $("[name='parentMessageId']").val(),
      "rootMessageId" : $("[name='rootMessageId']").val(),
      "nickname": $("[name='nickname']").val(),
      "email"   : $("[name='email']").val(),
      "avatar" : $("[name='avatar']").val(),
      "content" : $("[name='content']").val(),
      "address" : $("[name='address']").val()

    },function (responseTxt, statusTxt, xhr) {
      clearContent();
    });

  }

  // 清除表单
  function clearContent() {
    $("[name='content']").val('');
    $("[name='parentMessageId']").val(null);
    $("[name='rootMessageId']").val(null);
    $("[name='content']").attr("placeholder", "请输入评论信息...");
  }

  function reply(obj) {
    var rootMessageId = $(obj).data('rootmessageid');
    var parentmessageId = $(obj).data('parentmessageid');
    var messageNickname = $(obj).data('messagenickname');

    $("[name='content']").attr("placeholder", "@" + messageNickname + ":").focus();
    $("[name='parentMessageId']").val(parentmessageId);
    $("[name='rootMessageId']").val(rootMessageId);
    $(window).scrollTo(0,500);
  }

  // 获取关键词输入框
  const keywordInput = $('#keywordInput');
  //搜索 当用户输入结束时触发事件
  keywordInput.on('input', function() {
    // 使用定时器延迟发送 AJAX 请求，以确保用户输入结束
    clearTimeout(this.timer);
    this.timer = setTimeout(function () {
      // 获取用户输入的关键词
      const keyword = keywordInput.val();
      // 发送 AJAX 请求
      $.ajax({
        url: '/search',
        method: 'GET',
        data: { keyword: keyword },
        success: function(response) {
          // 处理从后端返回的数据
          if (response.code === 20000){
            var resultList = response.data.blogs;
            // 获取搜索结果列表容器
            var searchResults = $('#searchResults');
            // 清空原来的结果
            searchResults.empty();
            if (resultList){
              // 渲染搜索结果列表
              resultList.forEach(function(blog) {
                var blogItem = $('<a>').attr('href', `/blog/${blog.id}`).addClass('list-group-item list-group-item-action').text(blog.title);
                searchResults.append(blogItem);
              });
            }
          }
        },
        error: function(error) {
          console.error('Error:', error);
        }
      });
    }, 1000); // 1000 毫秒延迟
  });
  checkQQEmail()

  // 获取关键词输入框
  const keywordInput = $('#keywordInput');
  //搜索 当用户输入结束时触发事件
  keywordInput.on('input', function() {
    // 使用定时器延迟发送 AJAX 请求，以确保用户输入结束
    clearTimeout(this.timer);
    this.timer = setTimeout(function () {
      // 获取用户输入的关键词
      const keyword = keywordInput.val();
      // 发送 AJAX 请求
      $.ajax({
        url: '/search',
        method: 'GET',
        data: { keyword: keyword },
        success: function(response) {
          // 处理从后端返回的数据
          if (response.code === 20000){
            var resultList = response.data.blogs;
            // 获取搜索结果列表容器
            var searchResults = $('#searchResults');
            // 清空原来的结果
            searchResults.empty();
            if (resultList){
              // 渲染搜索结果列表
              resultList.forEach(function(blog) {
                var blogItem = $('<a>').attr('href', `/blog/${blog.id}`).addClass('list-group-item list-group-item-action').text(blog.title);
                searchResults.append(blogItem);
              });
            }
          }
        },
        error: function(error) {
          console.error('Error:', error);
        }
      });
    }, 1000); // 1000 毫秒延迟
  });

</script>

</body>
<!--bootstrap的js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>

<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!--axios-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>


</html>